<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
</head>
<body>
    <div id="main" style="width: 500px;height: 500px;"></div>
    <script>
        let mycharts = echarts.init(document.getElementById("main"));
        let option;
        $.getJSON('./js/ks1.json',function(json){
            console.log(json);
            mycharts.setOption(option={
                title:{
                    text:"关系图"
                },
                series:[{
                    type:'graph',
                    label:{
                        show:true,
                        position:'bottom'
                    },
                    edgeSymbolSize:[4,8],
                    edgeLabel:{
                        show:true,
                        formatter:"{c}"
                    },
                    edgeSymbol:['circle','arrow'],//表示线的关系
                    // categories:json.categories,
                    categories:json.categories.map(function(c){
                        return{
                            name:c.name,
                            symbolSize:c.symbolSize,
                            symbol:c.symbol,
                            itemStyle:{
                                color:c.color
                            }
                        }
                    }),

                    edges:json.edges,
                    data:json.nodes,
                }]
            })
            
        })
    </script>
    
</body>
</html>